<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>
</head>

<body>
    防抖或是节流：限制函数的执行次数 1.防抖：通过setTimeout的方式，在一定时间间隔内，将多次触发变成一次触发 2. 节流：减少一段时间内的触发（也可以说是）

    <div id="box"></div>
    <input type="text" id="input">
    <script>
        // 1.对于在事件被触发的n秒后再执行的回调 -> 延迟执行
        // 2.如果在这n秒内再触发时间，重新开始计时
        var box = document.getElementById("box");
        // box.onmouseover = function() {
        //     console.log("1");
        // }
        // console.log(box);
        function test() {
            console.log(1);
        }

        box.onmouseover = debounce(test, 1000, false);

        // triggleNow是否马上触发，还是延时一秒再触发
        function debounce(fn, time, triggleNow) {
            var t = null;
            return function() {
                var _self = this,
                    args = arguments;
                if (t) {
                    clearTimeout(t);
                }
                if (triggleNow) {
                    var exec = !t;
                    t = setTimeout(() => {
                        t = null;
                    }, time);
                    if (exec) {
                        fn.apply(_self, args);
                    }
                } else {
                    t = setTimeout(() => {
                        fn.apply(_self, args);
                    }, time);
                }

            }
        }

        debounce.remove = function() {
            clearTimeout(t);
            t = null;
        }

        // 函数防抖：n秒内只要你持续触发事件，就重新计时
        //          事件处理函数的程序将永远不能被执行

        //函数节流：事件被触发,n秒之内只执行一次事件处理函数
        //输入验证
        var input = document.getElementById("input");

        input.onkeyup = throttle(check, 1000);

        function check() {
            console.log("test");
        }

        function throttle(fn, delay) {
            var t = null;
            begin = new Date().getTime();
            return function() {
                var _self = this,
                    args = arguments,
                    cur = new Date().getTime();
                clearTimeout(t);
                if (cur - begin >= delay) {
                    fn.apply(_self, args);
                    begin = cur;
                } else {
                    t = setTimeout(() => {
                        fn.apply(_self, args);
                    }, delay);
                }
            }
        }
    </script>
</body>

</html>